<template>
  <view class="card bg-white margin-top-20 flex-row align-top padding-left-26 padding-top-20" :class="{'subscribe': type === 'subscribe'}" @click="jump(`/pages/user-detail/index?id=${item.tno}&distance=${item.distance}`, 'navigateTo', false)">
    <image v-if="item.avatarUrl" :src="item.avatarUrl" class="avatar margin-top-10" mode="aspectFill" ></image>
    <view v-else class="avatar margin-top-10" style="background: #F6F6F6" />
    <view v-if="type !== 'subscribe'" class="margin-top-10 left-box" @click.stop="viewImages">
      <view v-if="item.serviceStatus === 'ONLINE'" class="tag flex-row flex-center">
        <text class="text-22 color-t1">可服务</text>
      </view>
      <view v-if="item.serviceStatus === 'RESTING'" class="tag flex-row flex-center tag-t2">
        <text class="text-22 color-t2">休息中</text>
      </view>
    </view>

    <view class="margin-left-26 padding-right-20 relative flex-item">
      <view class="flex-row align-center">
        <text class="text-32 color-t1 text-bold">{{ item.nickname }}</text>
        <view v-if="item.warrantyStatus === '1'" class="assure flex-row align-center padding-lr-10 padding-tb-4" @click.stop="$emit('showSafeguard')">
          <image src="/static/assure.png" class="assure-img" />
          <text class="color-second text-20 margin-left-4">已担保</text>
        </view>
      </view>

      <view class="margin-top-14 flex-row align-center">
        <image src="/static/star.png" class="star margin-right-10" />
        <text class="color-second text-26 text-bold margin-right-18">{{ item.star }}</text>
        <text class="text-24 color-t2">评价数 {{ item.commentCount }}</text>
      </view>

      <view v-if="item.profile" class="text-overflow-two margin-top-10 padding-bottom-10" :class="{'border-bottom': type !== 'subscribe'}">
        <text class="block text-overflow-two text-26 color-t2">{{ item.profile }}</text>
      </view>

      <view v-else class="content" :class="{'border-bottom': type !== 'subscribe'}"></view>

      <template v-if="type !== 'subscribe'">
        <view v-if="type" class="card-footer flex-row align-center justify-between">
          <by-view v-if="hasMenu" @click="$emit('showMenu')">
            <view class="flex-row">
              <view class="dot" />
              <view class="dot" />
              <view class="dot" />
            </view>
          </by-view>
          <view v-else />
          <text class="text-26 color-t2">{{date}}</text>
        </view>

        <view v-else class="card-footer flex-row align-center justify-end">
          <image src="/static/address.png" class="address margin-right-10" />
          <text class="text-26 color-t2">{{ item.distance }}</text>
        </view>
      </template>

      <view v-else class="padding-bottom-16"></view>

      <view v-if="showContact" class="btn" :class="{subscribe:type === 'receive-subscribe' || type === 'subscribe-history'}">
        <template v-if="type === 'evaluate'">
          <by-button v-if="userComment"  :text="userComment.isDeleteStar ? '已删除' : '已评价'" bold @click="viewComment" />
          <by-button v-else text="去评价" bold @click="viewComment" />
        </template>
        <template v-else-if="type === 'myAssessment'">
          <by-button v-if="userComment"  :text="userComment.isDeleteStar ? '已删除' : '已评价'" bold @click="viewComment" />
          <by-button v-else text="待评价" bold />
        </template>
        <by-button v-else-if="type === 'receive'" text="待联系" bold @click="$emit('waitTouch', $event)"/>
        <by-button v-else-if="type === 'receive-subscribe' || type === 'subscribe-history'" text="预约详情" bold @click="$emit('viewSubScribeDetail')"/>
        <by-button v-else :tno="item.tno" text="去联系" bold open-type="showContact" @showContact="$emit('touch', $event)"/>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { jump, viewImage } from '@/common/util'
import type { AnyObject, TListCard } from '@/common/types'

interface IProps{
  item: AnyObject
  userComment?: AnyObject
  type: TListCard
  showContact: boolean
  hasMenu: boolean
  date?: string
}

const props = withDefaults(defineProps<IProps>(), {
  item: () => ({}),
  showContact: true,
  hasMenu: false
})

const $emit = defineEmits(['touch', 'showSafeguard', 'showMenu', 'evaluate', 'waitTouch', 'viewSubScribeDetail'])

function viewComment() {
  if (props.type === 'evaluate' || (props.type === 'myAssessment' && props.userComment)) $emit('evaluate', props.userComment?.technicainStar)
}

function viewImages() {
  if (props.item.picUrls) {
    const images = props.item.picUrls.split(',')
    viewImage(0, images)
  }
}
</script>

<style scoped lang="scss">
@include setPadding(left, 26);

@include setPadding(tb, 4);

@include setMargin(left, 4);

@include setMargin(top, 14);

@include setMargin(right, 18);

@include setPadding(bottom, 16);

.card{
  border-radius: 15rpx;

  &.subscribe{
    height: 226rpx;
  }

  .left-box{
    width: 164rpx;
    height: 164rpx;
    border-radius: 50%;
    @include position(absolute,$z-index:1);
  }

  .avatar{
    width: 164rpx;
    height: 164rpx;
    border-radius: 50%;
  }

  .size-img{
    width: 4rpx;
    height: 4rpx;
  }

  .tag{
    @include position(absolute, $left: 50%, $bottom: -20rpx);
    width: 100rpx;
    height: 36rpx;
    background: $color-primary;
    border-radius: 18rpx;
    transform: translateX(-50%);

    &.tag-t2{
      background: #eee;
    }

  }

  .assure{
    height: 28rpx;
    background: #FDD7B6;
    border-radius: 8rpx;
    margin-left: 15rpx;

    .assure-img{
      width: 15rpx;
      height: 18rpx;
    }

  }

  .star{
    width: 22rpx;
    height: 22rpx;
    margin-bottom: 4rpx;
  }

  .score{
    font-size: 26rpx;
    font-weight: bold;
    color: #FD8300;
    line-height: 45rpx;
  }

  .content{
    min-height: 60rpx;
  }

  .border-bottom{
    border-bottom: 2rpx solid $color-border;
  }

  .card-footer{
    height: 70rpx;

    .dot{
      width: 6rpx;
      height: 6rpx;
      border-radius: 50%;
      background: $color-t2;

      &:nth-child(2){
        margin: 0 6rpx;
      }

    }

  }

  .btn{
    @include position(absolute, 6rpx, 20rpx);
    width: 140rpx;

    &.subscribe{
      width: 170rpx;
    }

  }

}
.address{
  width: 18rpx;
  height: 24rpx;
}
</style>
